<template>
	<view class="container">
		<!-- <view class="intro"></view>
	  <view class=""> 当前位置的经度:{{ longitude }} </view>
	  <view class=""> 当前位置的纬度:{{ latitude }} </view> -->
		<view class="wea">
			<view class="top">
				{{ cityData.data.adm2 + cityData.data.name }}
			</view>
			<view class="bot">
				<view class="tem">{{ weaData.temp }}°</view>
				<view>{{ weaData.windDir }} | {{ weaData.text }}</view>
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular autoplay="true" interval="2000" vertical duration="500">
						<swiper-item>
							<view class="swiper-item uni-bg-red">风力: {{ weaData.windScale }}</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">湿度: {{ weaData.humidity }}%</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">气压: {{ weaData.pressure }}hPa</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="seven">
			<view class="top">{{ sevenData.data.length }}日预报</view>
			<view class="bot">
				<scroll-view scroll-x="true" class="scroll-view_H">
					<view v-for="(item, index) in sevenData.data" :key="index" class="scroll-view-item_H">
						<view class="item">
							<view>{{ item.fxDate }}</view>
							<view>{{ item.tempMin }}~{{ item.tempMax }}℃</view>
							<view>{{ item.textDay }}</view>
							<view>{{ item.windDirDay }} | {{ item.windScaleDay }}级 </view>
						</view>
					</view>
				</scroll-view>
			</view>


		</view>
		<Scroll :cityId="cityData.data.id"></Scroll>
	</view>
</template>

<script>
import { citySerch, weatherNow, weatherSeven, warning, lifeData } from '@/api/api.js'
import { ref, reactive, onMounted } from "vue";
import Scroll from "@/components/scrollView/index";
export default {
	components: {
		Scroll
	},
	setup() {
		const cityData = reactive({
			data: {
				id: ''
			}
		});
		const weaData = ref({});
		const position = ref('');
		const sevenData = reactive({
			data: []
		});
		onMounted(() => {
			console.log('onmounted');
			// 获取地理位置
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: function (res) {
					console.log(res);
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					position.value = `${res.longitude.toFixed(2)},${res.latitude.toFixed(2)}`
					console.log(position.value);
					if (position.value.length > 1) {
						// 获取城市信息
						citySerch({ location: position.value }).then(res => {
							cityData.data = res.location[0];
							console.log(cityData.data, 'cityData.data')
							console.log(res);
							if (res.code == 200 && cityData.data.id) {
								getWeatherNow(cityData.data.id);
								getWeatherSeven(cityData.data.id);
								getWarning(cityData.data.id);

							}
						})
					}
				},
				fail: function (err) {
					console.log(err);
				}
			});

		})

		// 天气数据
		function getWeatherNow(cityID) {
			weatherNow({ location: cityID }).then(res => {
				weaData.value = res.now;
				console.log(weaData.value);
			})
		}
		// 七日天气
		function getWeatherSeven(cityID) {
			weatherSeven({ location: cityID }).then(res => {
				sevenData.data = res.daily;
				console.log(res.daily);
			})
		}
		// 自然灾害
		function getWarning(cityID) {
			warning({ location: cityID }).then(res => {
				console.log(res);
			})
		}



		return {
			cityData,
			position,
			weaData,
			sevenData,
			weatherNow,
			weatherSeven,
			getWeatherNow,
			getWarning,
			getWeatherSeven
		}
	},
	onLoad() {
		console.log('onload');
	},
	onShow() {
		console.log('我是shou');
	}
}
</script>

<style lang="scss">
@import './index.scss';
</style>
